<template>
	<view class="">
		<view
			style="
			background-color: #FFFFFF;
			width: 100%; 
			margin: 20rpx auto 30rpx;
			height: 100%;
			overflow: hidden;"
			v-for="(i,index) in particularsList" @click='btnDynamic' :key='index'>
			<view style=" display: flex;justify-content: space-between;padding-top: 20rpx;">
				<view style="display: flex;padding: 20rpx; 20rpx 0 20rpx;">
					<image @click.stop="previewPhoto(index,x)" lazy-load :lazy-load-margin="0"
						style="width: 100rpx; height: 100rpx;border-radius: 50%;margin-right:10rpx;" 
						:src="i.userLogo"
						mode="scaleToFill">
					</image>
					<!-- <u-avatar   fontSize="26"></u-avatar> -->
					<view  style="margin-left: 15rpx; ">
						<view style="color:#7E7E7E;font-size: 31rpx;margin-bottom: 10rpx;">
							{{i.user_name}}
						</view>
						<!-- <view style="width: 100rpx;">
							<u-tag v-for="(tags,j) in i.need_pd" :key="j" :text="tags.item_name" borderColor='#F2F6F9'
								bgColor='#F2F6F9' color="#999999" />
						</view> -->
						<view
							style="padding: 0rpx 0rpx 0 0rpx; color: #999999;font-size: 28rpx;width: 120rpx;width: 180rpx;">
							{{i.created_at.split(' ')[0]}}
						</view>
					</view>
				</view>
				<!-- <view style="padding: 30rpx 0rpx 0 0rpx; color: #999999;font-size: 28rpx;width: 120rpx;width: 180rpx;">
					{{i.created_at.split(' ')[0]}}
				</view> -->
			</view>
			<view style=" padding: 0 20rpx 0 20rpx;">
					<u-read-more showHeight="250" :toggle="true" text-indent="0" color="#c193f1">
						<view style="font-size: 28rpx;line-height:1.6;">
							<rich-text :nodes="i.content"></rich-text>
						</view>
					</u-read-more>
					
			<!-- 	<view class="conts" v-if="i.showText">
					<text class="content_text" selectable="true">{{i.content}}</text>
					<text v-if="i.content !== null && i.content.length > 35"
						style="color:#ae87d8;font-size:28rpx;margin-left: 10rpx;"
						@click.stop="toggleDescription(index)">收起</text>
				</view>
				<view v-else class="cont">
					<text class="content_text" selectable="true"
						v-if="i.content !== null && i.content.length > 0 && i.content.length < 35">
						{{i.content.substr(0, 61)}}
					</text>
					<text class="content_text" selectable="true"
						v-if="i.content !== null && i.content.length > 0 && i.content.length > 35">
						{{i.content.substr(0, 106)+'...'}}
					</text>
					<text v-if="i.content !== null && i.content.length > 45"
						style="color:#ae87d8;font-size:28rpx;margin-left: 10rpx;"
						@click.stop="toggleDescription(index)">展开全文</text>
				</view> -->
				<view style="margin: 20rpx 0 20rpx 0;">
					<!-- <uni-grid :col="3" :border='false' hover-class='none'>
						<uni-grid-item :custom-style="customStyleImg" v-for="(list,x) in i.img_list" :key="x">
							<image @click.stop="previewPhoto(index,x)" lazy-load :lazy-load-margin="0"
								style="width: 150rpx; height: 150rpx;border-radius: 20rpx;" :src="list"
								mode="scaleToFill">
							</image>
						</uni-grid-item>
					</uni-grid> -->
					<!-- 图片 -->
					<view class="dynamic_cont_img">
						<block>
							<!-- 单张 -->
							<block v-if="i.img_list.length == 1">
								<image @tap.stop="previewImage(img, i.img_list)"  :src="img"
									v-for="(img,index1) in i.img_list" :key="index1" class="img1" mode="aspectFill">
								</image>
							</block>
							<!-- 2张 -->
							<block v-if="i.img_list.length == 2">
								<view class="img2">
									<image @tap.stop="previewImage(img, i.img_list)" :src="img"
										v-for="(img,index2) in i.img_list" :key="index2" mode="aspectFill"></image>
								</view>
							</block>
							<!-- 4张 -->
							<block v-if="i.img_list.length == 4 ">
								<view class="img4">
									<image @tap.stop="previewImage(img, i.img_list)" :src="img"
										v-for="(img,index3) in i.img_list" :key="index3" mode="aspectFill"></image>
								</view>
							</block>
							<!-- 3/4张以上不包含4张 -->
							<block v-if="i.img_list.length > 4 || i.img_list.length == 3">
								<view class="img3">
									<image @tap.stop="previewImage(img, i.img_list)" :src="img"
										v-for="(img,index4) in i.img_list" :key="index4" mode="aspectFill"></image>
								</view>
							</block>
						</block>
					</view>
					<!--  -->
					<view>
						<view class="rt-an flex-box" style="color:#9fa1aa;justify-content:flex-end">
							<view class="an1 flex-box" @tap.stop="giveClick(i)">
					
								<u-icon name="thumb-up" v-if="!i.showText" size="32" color="#eee" style="width:40rpx;height:40rpx;margin-right:10rpx" ></u-icon>
								<u-icon name="thumb-up" v-else size="32" color="#be8ff0" style="width:40rpx;height:40rpx;margin-right:10rpx" ></u-icon>
								点赞
							</view>
							<button
							class="an2 shareBtn" 
							data-name="shareBtn"
							:data-obj="i"
							open-type="share"> 
							
							<view  class="an2 flex-box" style="margin-left:20rpx;font-size:30rpx;color:#9fa1aa;">
								<image src="/static/fx-a1.png" style="width:40rpx;height:40rpx;margin-right:10rpx"  mode=""></image>
								分享
							</view>
							</button>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import uGrid from "../u-grid/u-grid.vue"
	// import uGridItem from "../u-grid-item/u-grid-item.vue"
	import {
		mapState
	} from 'vuex'
	export default {
		components:{
			// uGrid,
			// uGridItem
		},
		props: {
			scrollTop: {
				type: Number,
				default: 0
			},
			particularsList: {
				type: Array,
				default: []
			}

		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		data() {
			return {
				imgHeight:0,
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx",
				},
				customStyleImg: {
					padding: '7rpx 0'
				},
				list: [{
					number: 58,
					icon: 'https://mp-773911e8-6917-4f03-9f50-e2393807e7c3.cdn.bspapp.com/cloudstorage/fa92156a-c4e1-4d4f-a560-e5658c7830cf.png'
				}, {
					number: 78,
					icon: 'https://mp-773911e8-6917-4f03-9f50-e2393807e7c3.cdn.bspapp.com/cloudstorage/ae079712-57ee-4cdd-860e-4e3969ea9cd0.png'
				}]
			}
		},
		
		onShareAppMessage: function(e) {
			console.log(e,9999)
			 if(e.from=='button'){
			 	let obj = e.target.dataset.obj
			 	console.log(obj,55555)
				return {
					title:obj.title,
					path:"/pages/Station/Station?id=" + obj.id,
					imageUrl:obj.img_list[0]
				}
			 }else{
			 	return {
			 		path:'/pages/index/index'
			 	}
			 }
		},
		methods: {
		
			giveClick(i){
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				console.log('点赞')
				this.$u.api.activityFabulous({
					id:i.id,
					
				})
				.then(res=>{
					i.showText=true
					console.log(res,'fabulous');
					let result = res.msg
					
				})
			},
			// 全文展开收起
			toggleDescription(index) {
				let that = this
				that.$emit('trigger', index)

			},
			previewPhoto(index, j) {
				var that = this
				uni.previewImage({
					current: j,
					urls: this.particularsList[index].img_list,
					loop: true
				});

			},
			previewImage(url, urls) {
				uni.previewImage({
					current: url, // 当前显示图片的http链接
					urls: urls // 需要预览的图片http链接列表
				});
			},
			btnDynamic() {
				uni.navigateTo({
					url: '/pagesA/dynamic/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	button::after{
		background-color: transparent;
		color:none;
		border:none;
		content: initial;
		width:0;
		height:0;
	}
	button{padding: 0;margin: 0;}
	button::after{ border: none; }
	.shareBtn{
		background:transparent;
		
		// margin:0 auto;
	}
	.content_text {
		// letter-spacing: 2rpx;
		color: #7E7E7E;
		font-size: 30rpx;
	}
	// 图片样式
	.img1 {
		display: block;
		max-height: 710rpx;
		border-radius: 5px;
		overflow: hidden;
		width:100%;
	}
	
	
	.img2 {
		display: flex;
		flex-direction: row;
	
		image {
			margin: 5rpx;
			border-radius: 5px;
			width: 50%;
			height: 300rpx;
		}
	}
	
	.img3 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	
		image {
			width: 31.3%;
			height: 200rpx;
			margin: 1%;
			border-radius: 5px;
		}
	}
	
	.img4 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	
		image {
			width: 38%;
			height: 250rpx;
			margin: 1%;
			border-radius: 5px;
		}
	}
</style>